<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
        @on-delete="handleDelete" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
    </Card>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  payStateValues,
  machineGroupNameValues,
  machineNumberValues,
  whetherValues,
  orderTypes,
  orderStates,
  commoditys,
} from '@/mock/data/option-data.js'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'discount_code_statis_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '货道', key: 'freightWay' },
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器编号', key: 'machineNum' },
        { title: '机器名', key: 'machineName', width: 120 },
        { title: '商户订单号', key: 'merchantOrderNum' },
        // { title: '微信订单号', key: 'wechatOrderNum' },
        { title: '商品名称', key: 'commodityName' },
        { 
          title: '商品价格', 
          key: 'commodityPrice',
          render: (h, params) => h('div', params.row.commodityPrice.toFixed(2))
        },
        { 
          title: '订单总金额', 
          key: 'orderTotalAmount',
          render: (h, params) => h('div', params.row.orderTotalAmount.toFixed(2))
        },
        // { title: '代金券金额', key: 'couponAmount' },
        { 
          title: '实付金额', 
          key: 'payAmount',
          render: (h, params) => h('div', params.row.payAmount.toFixed(2))
        },
        { title: '订单状态', key: 'orderState' },
        // { title: '订单类型', key: 'orderType' },
        // { title: '是否中奖', key: 'isPrize' },
        { title: '支付时间', key: 'payDate' },
        {
          title: '操作',
          key: 'action',
          // width: 170,
          render: (h, params) => {
            return h('div', [
              // h('Button', {
              //   props: {
              //     type: 'warning',
              //     size: 'small',
              //     ghost: true,
              //   },
              //   on: {
              //     click: () => this.tableData.splice(params.index, 1)
              //   },
              // }, '删除'),
              // h('span', {}, ' '),
              params.row.pay_status === 3 && h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: async () => { 
                    // const { orderState, initRowIndex } = params.row;
                    // if (orderState !== '退款审核中') {
                    //   this.$Message.error('当前订单不支持驳回！');
                    //   return;
                    // }

                    // this.tableData[initRowIndex].orderState = '已驳回';
                    // this.$Message.success('操作成功！');
                    
                    await rcRequest({
                      method: 'post',
                      url: '/pay/update_pay_status',
                      data: { pay_id: params.row.id }
                    })
                    this.getListData()
                  }
                },
              }, '驳回'),
              // h('span', {}, ' '),
              // h('Button', {
              //   props: {
              //     type: 'error',
              //     size: 'small',
              //     ghost: true,
              //   },
              //   on: {
              //     click: () => { 
              //       const { orderState, initRowIndex } = params.row;
              //       if (orderState === '退款审核中') {
              //         this.$Message.error('当前订单退款审核中！');
              //         return;
              //       }

              //       this.tableData[initRowIndex].orderState = '退款审核中';
              //       this.$Message.success('操作成功！');
              //     }
              //   },
              // }, '退款'),
            ]);
          }
        }
      ],
      tableData: [],
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `非现金流水记录-${(new Date()).valueOf()}.csv`
      })
    },
    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/pay/select_pay_pay_type_list',
        data: { }
      })
      this.tableData = data.map(item => ({
        id: item.id,
        freightWay: item.aisle_name,
        machineGroupName: item.machine_group_name,
        machineNum: item.machine_number,
        machineName: item.machine_name,
        merchantOrderNum: item.out_trade_no,
        wechatOrderNum: '0',
        commodityName: item.product_name,
        commodityPrice: item.unit_price,
        orderTotalAmount: item.total_fee,
        couponAmount: '0',
        payAmount: item.pay_fee,
        orderState: payStateValues[item.pay_status],
        pay_status: item.pay_status,
        isPrize: false,
        payDate: item.pay_date,
      }))
    },
  },
  mounted() {
    this.getListData()
  }
}
</script>

<style scoped></style>
